<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>房间编辑</title>
    <link href="admin/bower_components/bootstrap/dist/css/bootstrap.min.css" th:href="@{/admin/bower_components/bootstrap/dist/css/bootstrap.min.css}" rel="stylesheet">
    <link href="admin/plugins/bootstrap-fileinput/css/fileinput.min.css" th:href="@{/admin/plugins/bootstrap-fileinput/css/fileinput.min.css}" rel="stylesheet">
</head>
<body>
<form class="form-horizontal" action="${basePath }/admin/editRoomcount" th:action="@{/admin/editRoomCount}"
      method="post" style="width: 1200px; margin-top: 20px">

    <input name="id" type="text" th:value="${roomCount!=null?roomCount.id:''}" style="display: none">
    <div class="form-group">
        <label for="inputTarget" class="col-sm-2 control-label">房间类型</label>
        <div class="col-sm-10">
            <select name="roomType" class="form-control">
                <tr th:each="room:${roomList}">
                    <option th:value="${room!=null?room.type:''}" th:text="${room.type}"></option>
                </tr>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="InputName" class="col-sm-2 control-label">房间号</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${roomCount!=null?roomCount.roomId:'' }"
                   id="InputName" name="roomId" placeholder="房间号">
        </div>
    </div>
    <div class="form-group">
        <label for="inputStatus" class="col-sm-2 control-label">状态</label>
        <div class="col-sm-10">
            <select name="status" class="form-control">
                <option th:value="1">启用</option>
                <option th:value="0">未启用</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>


<!-- jQuery 3 -->
<!-- jQuery 3 -->
<script
        th:src="@{/admin/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- piexif  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/plugins/piexif.min.js}"></script>

<!-- purify  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/plugins/purify.min.js}"></script>

<!-- fileinput  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/fileinput.min.js}"></script>

<!-- Bootstrap 3.3.7 -->
<script
        th:src="@{/admin/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>

<!-- fileinput  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>
<script type="text/javascript">
    var obj = $("#input-id");
    var option = {}
    option.uploadUrl = "/file/uploadimageone";
    option.uploadAsync = true;
    option.language = "zh";
    option.showCaption = true;
    option.showUpload = true;
    option.showRemove = true;
    option.showPreview = true;
    option.resizeImage = true;
    option.resizePreference = 'width';
    option.browseClass = "btn btn-primary";
    option.uploadLabel = "上传";
    option.enctype = "multipart/form-data";
    option.dropZoneEnabled = false;
    option.allowedFileExtensions = [ "png", "jpg", "gif" ];
    option.maxFileCount = 5;
    $("#inputWidth").blur(function() {

        width = $("#inputWidth").val();
        obj.fileinput('refresh', {
            maxImageWidth : width
        })

        if (isEmpty(width)) {
            return;
        }
    })
    $("#inputHeight").blur(function() {
        height = $("#inputHeight").val();

        obj.fileinput('refresh', {
            maxImageHeight : height
        })
        if (isEmpty(height)) {
            return;
        }
    })

    $(":radio").click(function(e) {
        if (e.target.defaultValue == 200) {

            obj.fileinput('refresh', {
                maxImageHeight : 200,
                maxImageWidth : 200
            })

            $("#inputWidth").val(200)
            $("#inputHeight").val(200)

        }
        if (e.target.defaultValue == 700) {

            obj.fileinput('refresh', {
                maxImageHeight : 450,
                maxImageWidth : 700
            })
            $("#inputWidth").val(700)
            $("#inputHeight").val(450)

        }
    });

    //with plugin options

    obj.fileinput(option/* {
							uploadUrl : "/file/uploadimageone",//上传的地址
							uploadAsync : true, //异步上传
							language : "zh", //设置语言
							showCaption : true, //是否显示标题
							showUpload : false, //是否显示上传按钮
							showRemove : true, //是否显示移除按钮
							showPreview : true, //是否显示预览按钮
							resizeImage : true, //调整图片的宽度
							maxImageWidth : 200,
							maxImageHeight : 200,
							resizePreference : 'width',
							browseClass : "btn btn-primary", //按钮样式
							uploadLabel : "上传", //设置上传按钮的汉字
							enctype : 'multipart/form-data',
							dropZoneEnabled : false, //是否显示拖拽区域
							allowedFileExtensions : [ "png", "jpg", "gif" ], //接收的文件后缀
							maxFileCount : 5

						} */).on("fileuploaded", function(event, data) {
        var response = data.response;
        if (response.uploaded == 1) {

            $("#inputImageUrl").val(response.url)

        } else {
            alert("文件上传失败")
        }

        console.log(response);

    }).on('fileerror', function(event, data, msg) { //一个文件上传失败
        alert('文件上传失败！' + msg);

    }).on("filebatchselected", function(event, files) {
        console.log(files)
    }).on('fileselect', function(event, numFiles, label) {

    });
    ;

    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    }
</script>
</body>
</html>